<template>
	<view>
		<view class="top_box">
			<view class="top_box_title">我的收藏</view>
			<view class="top_adress">
				<view class="top_adress_view" style="">
					<!-- <image @click="back" src="../../../static/zuo.png" mode="aspectFill" style="width: 60rpx; height: 60rpx"></image> -->
				</view>
				<view class="search_box">
					<u-search shape="square" :clearabled="true" bg-color="#fff" :show-action="false" style="width: 100%"></u-search>
				</view>
			</view>
		</view>
		<!-- <u-tabs :list="list" :is-scroll="false" active-color="#21B070" :current="current" @change="change"></u-tabs> -->
		<view class="shop_big_bpx">
			<view class="shop_bpx" v-for="(item, i) in 4" @click="toDeilt">
				<view class="shop_img_box">
					<image src="../../../static/logo.png" mode="aspectFill" class="shop_img"></image>
					<view class="shop_name">昆明市</view>
				</view>
				<view class="sho_title">休闲农场</view>
				<view class="sho_cont">已认养：666</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: '店铺收藏'
				},
				{
					name: '喂养收藏'
				},
				{
					name: '商品收藏'
				}
			],
			current: 0
		};
	},
	methods: {
		toDeilt() {
			uni.navigateTo({
				url: '/pages/index/merchant/details'
			});
		},
		change(index) {
			this.current = index;
		},
		back() {
			uni.switchTab({
				url: '/pages/my/my'
			});
		}
	}
};
</script>

<style scoped>
page {
	background-color: #f5f5f5;
}
.shop_big_bpx {
	display: flex;
	flex-wrap: wrap;
}
.sho_cont {
	font-size: 24rpx;
	margin-top: 10rpx;
	margin-left: 15rpx;
	color: #999999;
}

.sho_title {
	font-size: 30rpx;
	margin-top: 10rpx;
	margin-left: 15rpx;
}

.shop_img_box {
	position: relative;
}

.shop_name {
	position: absolute;
	top: 0%;
	right: 0%;
	font-size: 22rpx;
	padding: 2rpx 10rpx;
	background-color: aqua;
	color: #fff;
	border-radius: 0 10rpx;
}

.shop_img {
	width: 100%;
	height: 213rpx;
	border-radius: 10rpx 10rpx 0 0;
}

.shop_bpx {
	width: 345rpx;
	height: 335rpx;
	background-color: #fff;
	margin-top: 20rpx;
	margin-left: 20rpx;
	border-radius: 10rpx;
}

.top_box {
	width: 100%;
	height: 300rpx;
	background-color: #FF9329;
	padding-top: 14%;
}

.top_box_title {
	color: #fff;
	font-size: 36rpx;
	font-weight: 600;
	text-align: center;
}

.top_adress {
	display: flex;
	margin-left: 20rpx;
	margin-top: 55rpx;
}

.search_box {
	width: 629rpx;
	margin-left: 20rpx;
}
</style>
